<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        SelectManyButton
    </ui:define>

    <ui:define name="description">
        SelectManyButton is used to choose multiple items from a list using buttons.
    </ui:define>

    <ui:param name="documentationLink" value="/components/selectmanybutton" />

    <ui:define name="implementation">
        
        <h:form>
            <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
                <h:outputText value="Font:" />
                <p:selectManyButton value="#{selectManyView.selectedOptions}">
                    <f:selectItem itemLabel="b" itemValue="b" />
                    <f:selectItem itemLabel="u" itemValue="u" />
                    <f:selectItem itemLabel="i" itemValue="i" />
                </p:selectManyButton>
                
                <p:commandButton value="Submit" update="display" icon="pi pi-check" />
                <p:spacer />
                
                <h:outputText value="Selected:" />
                <p:dataList id="display" value="#{selectManyView.selectedOptions}" var="font" emptyMessage="No fonts selected">
                    <h:outputText value="#{font}" style="font-weight: bold" />
                </p:dataList>
            </h:panelGrid>
        </h:form>
        
    </ui:define>

</ui:composition>